<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>Team Calendar Login</title>

<script src='js/ui/jquery.js' type='text/javascript'></script>
<script src='js/ui/jquery.corner.js' type='text/javascript'></script>


<style>
body {
  font: 12px verdana;
	margin:10px auto;
	text-align:center;
	width:600px;
}

ul {
  /*padding: 0px;*/
	
}

li{list-style:none;}
li h1 {
  background: #6699FF; padding: 10px; width: 500px; color: #FFFFFF; font-size: 14px; cursor: pointer;
	
}

li div {
  background: #CCDDFF; width: 520px; display:none;
}

li div p {
  padding: 20px;
  margin: 0px;
}



</style>

<script language="JavaScript" type="text/javascript">


$(document).ready(function(){
$("#thetitle").fadeIn();
/*$(".panels").each(function(){
	$(this).corner();
});*/

$("#div1").slideDown('slow');
$("h1").click(function(){
  var target = $(this).next('div.panels')
  $("div.panels:visible").not(target).slideUp();
  target.slideToggle();

});
});




</script>
</head>
	<body>
		<div id="thetitle">
			<img src="images/team_calendar_logo.jpg" alt="Team Calendar">
		</div>
		<ul class="panels">
  		<li class="panels" align="center">
				<h1>Login</h1>
				<div id="div1" class="panels">
					<p>
						<b>Login:</b>
						<br>
						<form method="post" action="login.php">
               &nbsp;&nbsp;&nbsp;Username:
               <input type="text" size="15" name="username" />
               <br><br>&nbsp;&nbsp;&nbsp;Password:
               <input type="password" size="15" name="password" />
               <br><br>&nbsp;&nbsp;&nbsp;<input type="submit" value="Sign in" />
               &nbsp;&nbsp;<a href="#">Forgot password?</a>
               <br><br>
						</form>
					</p>
				</div>	
			</li>

  		<li class="panels" align="center">
				<h1>Register</h1>
				<div id="div2" class="panels">
					<p>
						<b>Register:</b><br>
						<form method="post" action="register.php">
                                        &nbsp;&nbsp;&nbsp;Username:&nbsp; <input type="text" size="15" name="username" />
                                        &nbsp;&nbsp;&nbsp;Password:
                                        <input type="password" size="15" name="password" />
                                        <br><br>&nbsp;&nbsp;&nbsp;First Name:
                                        <input type="text" size="15" name="firstname" />
                                        &nbsp;&nbsp;&nbsp;Last Name:
                                        <input type="text" size="15" name="lastname" />
                                        <br><br>&nbsp;&nbsp;&nbsp;E-Mail:
                                        &nbsp;&nbsp;&nbsp;<input type="text" size="15" name="email" />
                                        <br><br>&nbsp;<input type="submit" value="Register" />
																				<br><br>
  					</form>
					</p>
				</div>
  		</li>

			<li class="panels" align="center">
				<h1>About</h1>
        <div id="div1" class="panels">
		    	<p align='justify'>
						<b>What is Team Calendar?</b><br>
Team Calendar is a web-based calendar targeted at informal groups and small
businesses. It seeks to fill the void between large corporate calendar solutions
such as Microsoft Outlook and personal programs such as Apple's iCal. Users can
form teams and create events and new calendars, and schedule meetings based on the
availability of other team members with a scheduling application. The use of the 
Google Calendar API provides a rich feature set in terms of privacy and security,
and Team Calendar's functionality seeks to build on this to create an application 
suitable for its target audience.
				</p>
				</div>
			</li>
		</ul>	
	</body>
</html>
